<template>
  <div>
    <el-row :gutter="40" class="panel-group">
      <el-col type="flex" :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="box">
            <div class="title">
              <div>今日预估收益</div>
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="今日由推广带来的付款金额产生的付款预估收入"
                  placement="top"
                >
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </div>
            <div class="nums">
              <div class="central">
                <i class="rmb">￥</i>
                <i class="num">{{ statistics.todayEarnings }}</i>
              </div>
            </div>
            <!-- <el-divider></el-divider> -->
            <div
              class="title"
              style="border-top: 1px solid #e8e8e8; padding-top: 10px"
            >
              <div>昨日收益￥{{ statistics.yesterdayEarnings }}</div>
              <div>
                <i
                  :class="[
                    earningsGrowth > 0 ? 'el-icon-top' : 'el-icon-bottom',
                    earningsGrowth > 0 ? 'text-success' : 'text-danger',
                  ]"
                  :style="{ color: earningsGrowth > 0 ? 'green' : 'red' }"
                >
                  {{ earningsGrowth }}%
                </i>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col type="flex" :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="box">
            <div class="title">
              <div>今日付款订单</div>
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="今日由推广带来的付款订单笔数，不含未付款和无效订单"
                  placement="top"
                >
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </div>
            <div class="nums">
              <div class="central">
                <!-- <i class="rmb">￥</i> -->
                <i class="num">{{ statistics.todayOrders }}</i>
              </div>
            </div>
            <!-- <el-divider></el-divider> -->
            <div
              class="title"
              style="border-top: 1px solid #e8e8e8; padding-top: 10px"
            >
              <div>昨日付款订单{{ statistics.yesterdayOrders }}</div>
              <div>
                <i
                  :class="[
                    ordersGrowth > 0 ? 'el-icon-top' : 'el-icon-bottom',
                    ordersGrowth > 0 ? 'text-success' : 'text-danger',
                  ]"
                  :style="{ color: ordersGrowth > 0 ? 'green' : 'red' }"
                >
                  {{ ordersGrowth }}%
                </i>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col type="flex" :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="box">
            <div class="title">
              <div>今日交易额</div>
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="今日由推广带来的付款金额产生的付款预估收入"
                  placement="top"
                >
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </div>
            <div class="nums">
              <div class="central">
                <i class="rmb">￥</i>
                <i class="num">{{ statistics.todayGmv }}</i>
              </div>
            </div>
            <!-- <el-divider></el-divider> -->
            <div
              class="title"
              style="border-top: 1px solid #e8e8e8; padding-top: 10px"
            >
              <div>昨日交易额¥{{ statistics.yesterdayGmv }}</div>
              <div>
                <i
                  :class="[
                    gmvGrowth > 0 ? 'el-icon-top' : 'el-icon-bottom',
                    gmvGrowth > 0 ? 'text-success' : 'text-danger',
                  ]"
                  :style="{ color: gmvGrowth > 0 ? 'green' : 'red' }"
                >
                  {{ gmvGrowth }}%
                </i>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col type="flex" :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="box">
            <div class="title">
              <div>账户余额</div>
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="可以提现到账的实际金额"
                  placement="top"
                >
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </div>
            <div class="nums">
              <div class="central">
                <i class="rmb">￥</i>
                <i class="num">{{ statistics.balance }}</i>
              </div>
            </div>
            <!-- <el-divider></el-divider> -->
            <div
              class="title"
              style="border-top: 1px solid #e8e8e8; padding-top: 10px"
            >
              <div>可提现金额({{ statistics.withdrawable }}元)</div>
              <div>
                <div style="color: #409eff" @click="withdrawal(0)">去提现</div>
                <!-- <i class="el-icon-top">去提现</i> -->
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col type="flex" :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="box">
            <div class="title">
              <div>本月预估收益</div>
              <div>
                <el-tooltip class="item" effect="dark" placement="top">
                  <div slot="content">
                    该收入仅为本月按付款金额计算所产生的预估收入，<br>
                    由于不同活动结算日期不一致，<br>
                    并非是您本月的实际结算金额，<br>
                    最终结算金额以月结后您账户内实际收到的金额为准。
                  </div>
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </div>
            <div class="nums">
              <div class="central">
                <i class="rmb">￥</i>
                <i class="num">{{ statistics.monthEarnings }}</i>
              </div>
            </div>
            <!-- <el-divider></el-divider> -->
            <div
              class="title"
              style="border-top: 1px solid #e8e8e8; padding-top: 10px"
            >
              <div>上月预估收益￥{{ statistics.lastMonthEarnings }}</div>
              <div>
                <i
                  :class="[
                    monthEarningsGrowth > 0 ? 'el-icon-top' : 'el-icon-bottom',
                    monthEarningsGrowth > 0 ? 'text-success' : 'text-danger',
                  ]"
                  :style="{ color: monthEarningsGrowth > 0 ? 'green' : 'red' }"
                >
                  {{ monthEarningsGrowth }}%
                </i>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col type="flex" :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="box">
            <div class="title">
              <div>本月付款订单</div>
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="本月由推广带来的付款订单笔数，不含未付款和无效订单"
                  placement="top"
                >
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </div>
            <div class="nums">
              <div class="central">
                <!-- <i class="rmb">￥</i> -->
                <i class="num">{{ statistics.monthOrders }}</i>
              </div>
            </div>
            <!-- <el-divider></el-divider> -->
            <div
              class="title"
              style="border-top: 1px solid #e8e8e8; padding-top: 10px"
            >
              <div>上月付款订单{{ statistics.lastMonthOrders }}</div>
              <div>
                <i
                  :class="[
                    monthOrdersGrowth > 0 ? 'el-icon-top' : 'el-icon-bottom',
                    monthOrdersGrowth > 0 ? 'text-success' : 'text-danger',
                  ]"
                  :style="{ color: monthOrdersGrowth > 0 ? 'green' : 'red' }"
                >
                  {{ monthOrdersGrowth }}%
                </i>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col type="flex" :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="box">
            <div class="title">
              <div>本月交易额</div>
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="本月由推广带来的付款金额，不含未付款和无效订单"
                  placement="top"
                >
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </div>
            <div class="nums">
              <div class="central">
                <i class="rmb">￥</i>
                <i class="num">{{ statistics.monthGmv }}</i>
              </div>
            </div>
            <!-- <el-divider></el-divider> -->
            <div
              class="title"
              style="border-top: 1px solid #e8e8e8; padding-top: 10px"
            >
              <div>上月交易额¥{{ statistics.lastMonthGmv }}</div>
              <div>
                <i
                  :class="[
                    monthGmvGrowth > 0 ? 'el-icon-top' : 'el-icon-bottom',
                    monthGmvGrowth > 0 ? 'text-success' : 'text-danger',
                  ]"
                  :style="{ color: monthGmvGrowth > 0 ? 'green' : 'red' }"
                >
                  {{ monthGmvGrowth }}%
                </i>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col type="flex" :xs="24" :sm="12" :lg="6" class="card-panel-col">
        <el-card class="box-card">
          <div class="box">
            <div class="title">
              <div>年预估收益</div>
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="支持支付宝银行卡"
                  placement="top"
                >
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </div>
            <div class="nums">
              <div class="central">
                <i class="rmb">￥</i>
                <i class="num">{{ statistics.yearEarnings }}</i>
              </div>
            </div>
            <!-- <el-divider></el-divider> -->
            <div
              class="title"
              style="border-top: 1px solid #e8e8e8; padding-top: 10px"
            >
              <div>支持支付宝/银行卡</div>
              <div>
                <!-- <el-button size="mini" type="primary">去绑定收款账号</el-button> -->
                <div style="color: #409eff" @click="withdrawal(1)">
                  去绑定收款账号
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row
      class="panel-group"
      style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
    >
      <line-chart :chart-data="lineChartData" :x-axis-data="xAxisData" />
    </el-row>
  </div>
</template>

<script>
// import { getHomePageCollectData } from "@/api/distribute/utils";
// import { getUserProfile } from "@/api/system/user";
import { getDashboardData, getLastThirtyDaysData } from '@/api/admin/admin'
import LineChart from './dashboard/LineChart'
export default {
  components: {
    LineChart
  },
  data() {
    return {
      statistics: {},
      lineChartData: {
        expectedData: [], // 订单数据
        actualData: [] // 收益数据
      },
      xAxisData: [] // 日期数据
    }
  },
  computed: {
    // === 今日相关 vs 昨日 ===
    earningsGrowth() {
      const { todayEarnings, yesterdayEarnings } = this.statistics
      return this.calculateGrowth(todayEarnings, yesterdayEarnings)
    },
    ordersGrowth() {
      const { todayOrders, yesterdayOrders } = this.statistics
      return this.calculateGrowth(todayOrders, yesterdayOrders)
    },
    gmvGrowth() {
      const { todayGmv, yesterdayGmv } = this.statistics
      return this.calculateGrowth(todayGmv, yesterdayGmv)
    },

    // === 本月相关 vs 上月 ===
    monthEarningsGrowth() {
      const { monthEarnings, lastMonthEarnings } = this.statistics
      return this.calculateGrowth(monthEarnings, lastMonthEarnings)
    },
    monthOrdersGrowth() {
      const { monthOrders, lastMonthOrders } = this.statistics
      return this.calculateGrowth(monthOrders, lastMonthOrders)
    },
    monthGmvGrowth() {
      const { monthGmv, lastMonthGmv } = this.statistics
      return this.calculateGrowth(monthGmv, lastMonthGmv)
    }
  },
  created() {
    this.getList()
    this.getLastThirtyDaysChartData()
  },
  methods: {
    // 通用增长率计算函数（可复用）
    calculateGrowth(current, previous) {
      if (!previous || previous === 0) {
        return current === 0 ? 0 : 100 // 防止除以0：若昨日为0，今日>0则显示100%增长
      }
      return (((current - previous) / previous) * 100).toFixed(2)
    },
    // getUserInfo() {
    //   const that = this;
    //   getUserProfile().then((response) => {
    //     this.creator = response.data.id;
    //     if (that.creator) {
    //       this.getList();
    //     }
    //   });
    // },
    // async getUserInfo() {
    //   const that = this;
    //   const { data } = await getUserProfile();
    //   const creator = data.id;
    //   return creator;
    //   // this.creator = data.id;
    //   // if (data.id) {
    //   //   this.getList(data.id);
    //   // }
    // },
    withdrawal(type) {
      if (type == 0) {
        this.$router.push('/finance/balance')
      } else if (type == 1) {
        this.$router.push('/finance/account')
      }
    },

    // async getList(id) {
    //   console.log("residssss", id);
    //   const { data } = await getHomePageCollectData(id);
    //   this.statistics = data;
    // },
    getss() {
      this.getList()
    },

    getList() {
      getDashboardData().then((response) => {
        console.log('response', response)
        this.statistics = response
      })
    },
    getLastThirtyDaysChartData() {
      getLastThirtyDaysData().then((response) => {
        // 处理响应数据
        const ordersData = []
        const earningsData = []
        const dates = []

        response.forEach((item) => {
          dates.push(item.date)
          ordersData.push(item.orders)
          earningsData.push(item.earnings)
        })

        this.xAxisData = dates
        this.lineChartData = {
          expectedData: ordersData,
          actualData: earningsData
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  // margin: 24px 44px;
  // margin: 24px;
  padding: 10px 20px;
  margin: 0 0 20px;
  // background-color: rgb(240, 242, 245);
}

.panel-gr {
  margin: 24px;
}

// 添加这个样式确保所有卡片高度一致
.box-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

// .card-panel-col {
//   margin-bottom: 40px; // 与水平间隙gutter保持一致
// }

.title {
  display: flex;
  justify-content: space-between;
  // height: 40px;
}

.nums {
  display: flex;
  justify-content: center;
  align-items: center;

  .central {
    display: flex;
    padding-top: 16px;
    padding-bottom: 20px;
    align-items: center;

    .rmb {
      font-size: 30px;
      line-height: 1;
      vertical-align: top;
      display: inline-block;
    }

    .num {
      font-size: 30px;
    }
  }
}

.text-success {
  color: green;
}

.text-danger {
  color: red;
}

.el-icon-top {
  margin-left: 4px;
}

.card-panel-col {
  margin-bottom: 20px; // 设置垂直方向的间隙
}
</style>
